<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>自定义智能体</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/sourtable.js"></script>
    <script src="../js/vuedraggable.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/flexible.js"></script>

    <script src="../js/vconsole.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <style>
        html,
        body,
        #app {
            overflow: hidden;
        }
       img{
        pointer-events: none !important;
       }
        .box .header_tit .van-nav-bar {
            background-color: initial;
        }
        .box{
            display: flex;
            height: 100%;
            width: 100%;
            overflow: hidden;
            flex-direction: column;
        }

        .siteBox {
            flex: 1;
            width: 100%;
            /* height: 92%; */
            overflow: hidden;
display: flex;
flex-direction: column;
            /* background-color: #fff; */
            /* display: flex; */
            padding: 0 .3rem 12px .3rem;
            /* border: 1px red solid */
            /* flex-direction: column; */
        }

        .siteBox_h {
            /* height: 3rem; */
            /* background: #000; */
        }

        .h_text {
            display: flex;
            height: 1rem;
            padding: 0 5px 0 20px;
            line-height: 1rem;
            justify-items: center;
            justify-content: space-between;
        }

        .h_content .van-cell__title {
            font-size: 15px;

        }

        .h_content {
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
        }

        .h_text p {
            font-size: 16px;
            color: #000;
            font-weight: 550;
        }

        .h_btn .van-button--primary {
            color: #1989fa;
            /* font-size: 15px; */
            background-color: initial;
            border: 0px !important
        }

        .siteBox_b {
            /* flex: 1; */
            /* height: 1.5rem; */
            display: flex;
            flex-direction: column;
            /* background-color: pink; */
        }

        .siteBox_b_text {
            padding: 10px 16px;
            /* background-color: red; */

        }

        .siteBox_list {
            flex: 1;
            padding: 0px 10px 6px 16px;
            border-radius: 0 0 8px 8px;
            background-color: #fff;
            overflow: hidden;
                /* border-radius: 8px; */
        }

        .list_h {
            padding: 10px 20px 10px 16px;
            height: 40px;
            display: flex;
            border-radius: 8px 8px 0 0;
            background-color: #fff;
            justify-content: space-between;
        }

        .list_h p {
            font-size: 13px;
        }

        .card_name {
            display: flex;
            height: 1rem;
            padding-right: 30px;
            border-top: .5px solid #ebedf0;
            line-height: 1rem;

            justify-items: center;
            justify-content: space-between;
        }

        .list_content {
            height: calc(100% - 8px);
            overflow-y: auto;
            overflow-x: hidden;
        }

        .card_content {
            font-size: 15px;
        }

        .card_img {
            width: 15px;
            height: 12px;
        }

        .card_img img {
            width: 100%;
            height: 100%;
        }

        ::-webkit-scrollbar {
            /* 滚动条整体宽度/高度（垂直滚动条为宽度，水平滚动条为高度） */
            width: 1px;
            /* 垂直滚动条宽度 */
        }
    </style>
</head>

<body>
    <div class="box" v-cloak>
        <div class="header_tit">
            <van-nav-bar title="自定义" left-arrow>
                <template #left>
                    <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                </template>
            </van-nav-bar>
        </div>
        <div class="siteBox">
            <div class="siteBox_h">
                <div class="h_text">
                    <p>组件管理</p>
                    <div class="h_btn" @click="save">
                        <van-button type="primary">保存</van-button>
                    </div>
                </div>
                <div class="h_content">
                    <van-cell title="默认排序">
                        <template #right-icon>
                            <van-switch size="24px" v-model="isDefaultOn" inactive-color="#e4e4e4"
                                @change="handleSwitchChange('default')" />
                        </template>
                    </van-cell>

                    <van-cell title="自定义排序">
                        <template #right-icon>
                            <van-switch size="24px" inactive-color="#e4e4e4" v-model="isCustomOn"
                                @change="handleSwitchChange('custom')" />
                        </template>
                    </van-cell>
                </div>
            </div>
            <div class="siteBox_b">
                <p class="siteBox_b_text">已添加的组件</p>
                <div class="list_h">
                    <p>组件名称</p>
                    <p>长按拖动</p>
                </div>

            </div>
            <div class="siteBox_list">
                <div class="list_content">
                    <draggable v-model="cardList" handle=".card_name" v-model="cardList" 
                    handle=".card_name" 
                    :delay="500" 
                    :animation="100" 
                    :disabled="disabledDra" 
                    class="dre" :disabled="disabledDra" class="dre">
                        <div v-for="(item, index) in cardList" :key="index" class="card_name">
                            <div class="card_content">
                                {{item.title}}
                            </div>
                            <div class="card_img">
                                <img src="../image/drag.png" alt="">
                            </div>
                        </div>
                    </draggable>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    new Vue({
        el: ".box",
        data() {
            return {
                disabledDra: false,
                isCustomOn: false, // 开关的初始状态
                isDefaultOn: true, // 
                cardList:JSON.parse(sessionStorage.getItem("menus")),
                // cardList: [{
                //         color: "#4893de",
                //         color1: "#dde9ff",
                //         color2: "#cbdcff",
                //         title: "智能写作",
                //         text: 'AI公文写作工具',
                //         img: '../image/xyx.png',
                //         img1: '../image/xyx1.png',
                //         img2: '../image/xyx2.png',
                //         url: 'yr/write/index.html',
                //         show: true,
                //         children: [{
                //             text: "工作方案"
                //         }, {
                //             text: "工作总结"
                //         }, {
                //             text: "会议通知"
                //         }, ]
                //     }, {
                //         color: "#4c7de9",
                //         color1: "#ebf1ff",
                //         color2: "#ced6ff",
                //         title: "会议助手",
                //         text: "语音转换，生成纪要",
                //         img: '../image/huiyi.png',
                //         img1: '../image/huiyi1.png',
                //         img2: '../image/huiyi2.png',
                //         url: 'hyzs.html',
                //         show: false,
                //         children: [{
                //             text: "纪要生成"
                //         }, ]
                //     }, {
                //         color: "#f09641",
                //         color1: "#fef1c7",
                //         color2: "#f9e2a9",
                //         title: "转一转",
                //         text: '文档格式转换',
                //         url: 'yr/transfer/index.html',
                //         img: '../image/zyz.png',
                //         img1: '../image/zyz1.png',
                //         img2: '../image/zyz2.png',
                //         show: true,
                //         children: [{
                //             text: "PDF与WORD互转"
                //         }, {
                //             text: "WORD与OFD互转"
                //         }, ]
                //     },
                //     {
                //         color: "#62CCCC",
                //         color1: "#d6faf6",
                //         color2: "#b2f0f9",
                //         title: "智能翻译",
                //         text: '实时会话翻译',
                //         url: 'translationPage.html',
                //         img: '../image/fanyi.png',
                //         img1: '../image/fanyi1.png',
                //         img2: '../image/fanyi2.png',
                //         show: true,
                //         children: [{
                //             text: "实时翻译"
                //         }, {
                //             text: "会议翻译"
                //         }, ]
                //     },
                //     {
                //         color: "#13C09B",
                //         color1: "#dff9e0",
                //         color2: "#c6f8de",
                //         title: "智能会议",
                //         text: "语音轻松转文字、摘要",
                //         img: '../image/lyl.png',
                //         img1: '../image/lyl1.png',
                //         img2: '../image/lyl2.png',
                //         url: 'voiceRecordingList.html',
                //         show: true,
                //         children: [{
                //             text: "实时语音转写"
                //         }, {
                //             text: "语音发送内网"
                //         }, ]
                //     }, {
                //         color: "#624BFE",
                //         color1: "#eeedff",
                //         color2: "#e4daff",
                //         title: "说一说",
                //         text: '语音速记并发邮件',
                //         img: '../image/sys.png',
                //         img1: '../image/sys1.png',
                //         img2: '../image/sys2.png',
                //         url: 'textTransmission.html',
                //         show: false,
                //         children: [{
                //             text: "语音速记"
                //         }, ]
                //     },
                //     {
                //         color: "#5F84F7",
                //         color1: "#e7f3ff",
                //         color2: "#d1e3ff",
                //         title: "识一识",
                //         text: '文字、表格、票证识别',
                //         img: '../image/shiyishi.png',
                //         img1: '../image/shiyishi1.png',
                //         img2: '../image/shiyishi2.png',
                //         url: 'OCR.html',
                //         show: true,
                //         children: [{
                //             text: "打印文字识别"
                //         }, {
                //             text: "表格识别"
                //         }, {
                //             text: "证件识别"
                //         }, {
                //             text: "票据识别"
                //         }]
                //     }, {
                //         color: "#50A7F4",
                //         color1: "#d5f6ff",
                //         color2: "#c7f3ff",
                //         title: "拍一拍",
                //         text: '随手拍并发邮件',
                //         img: '../image/pyp.png',
                //         url: '   ',
                //         img1: '../image/pyp1.png',
                //         img2: '../image/pyp2.png',
                //         show: true,
                //         children: [{
                //             text: "图片添坐标"
                //         }, {
                //             text: "图片添水印"
                //         }, ]
                //     },
                //     {
                //         color: "#ff0000",
                //         color1: "#fbe8dc",
                //         color2: "#ffcccc",
                //         title: "党建会议助手",
                //         text: '助力党建工作高效开展',
                //         img: '../image/dj.png',
                //         url: 'yr/meeting/index.html',
                //         img1: '../image/dj1.png',
                //         img2: '../image/dj2.png',
                //         show: false,
                //         children: [{
                //             text: "实时录音"
                //         }, {
                //             text: "上传录音文件"
                //         }, ]
                //     },
                //     {
                //         color: "#ddb941",
                //         color1: "#feefc6",
                //         color2: "#ffe2b4",
                //         title: "PPT辅助生成",
                //         url: 'yr/ppt/index.html',
                //         text: 'PPT辅助生成',
                //         img: '../image/PPT.png',
                //         img1: '../image/PPT1.png',
                //         img2: '../image/PPT2.png',
                //         show: false,
                //         children: [{
                //             text: "WORD转PPT"
                //         }, {
                //             text: "主题生成PPT"
                //         }, ]
                //     },
                //     {
                //         color: "#73ce8f",
                //         color1: "#e3f8f9",
                //         color2: "#baebe3",
                //         title: "证件照优化",
                //         text: '打造专业证件照',
                //         url: 'yr/idphoto/index.html',
                //         img: '../image/zjz.png',
                //         img1: '../image/zjz1.png',
                //         img2: '../image/zjz2.png',
                //         show: false,
                //         children: [{
                //             text: "证件照"
                //         }, ]
                //     },
                //     {
                //         color: "#73ce8f",
                //         color1: "#e3f8f9",
                //         color2: "#baebe3",
                //         title: "证件照优化",
                //         text: '打造专业证件照',
                //         url: 'yr/idphoto/index.html',
                //         img: '../image/zjz.png',
                //         img1: '../image/zjz1.png',
                //         img2: '../image/zjz2.png',
                //         show: false,
                //         children: [{
                //             text: "证件照"
                //         }, ]
                //     },
                //     {
                //         color: "#73ce8f",
                //         color1: "#e3f8f9",
                //         color2: "#baebe3",
                //         title: "证件照优化",
                //         text: '打造专业证件照',
                //         url: 'yr/idphoto/index.html',
                //         img: '../image/zjz.png',
                //         img1: '../image/zjz1.png',
                //         img2: '../image/zjz2.png',
                //         show: false,
                //         children: [{
                //             text: "证件照"
                //         }, ]
                //     },
                //     {
                //         color: "#73ce8f",
                //         color1: "#e3f8f9",
                //         color2: "#baebe3",
                //         title: "证件照优化",
                //         text: '打造专业证件照',
                //         url: 'yr/idphoto/index.html',
                //         img: '../image/zjz.png',
                //         img1: '../image/zjz1.png',
                //         img2: '../image/zjz2.png',
                //         show: false,
                //         children: [{
                //             text: "证件照"
                //         }, ]
                //     },
                //     {
                //         color: "#73ce8f",
                //         color1: "#e3f8f9",
                //         color2: "#baebe3",
                //         title: "刘宇航",
                //         text: '打造专业证件照',
                //         url: 'yr/idphoto/index.html',
                //         img: '../image/zjz.png',
                //         img1: '../image/zjz1.png',
                //         img2: '../image/zjz2.png',
                //         show: false,
                //         children: [{
                //             text: "证件照"
                //         }, ]
                //     },


                // ],
            };
        },
        components: {
            draggable: vuedraggable

        },
        created() {
            const _this = this
            let jsApiList = []
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , function () {
                'use strict';
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'onHistoryBack',
                ];
                wx.config({
                    beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: corpid, // 必填，政务微信的cropID
                    timestamp: '1626832073', // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录1
                    jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            });
        },
        methods: {
            save() {
                if (this.isDefaultOn) {
                    mui.toast('保存成功', {
                        duration: 'long',
                        type: 'div'
                    })
                    this.home()

                } else {
                    this.sure()
                }
            },
            sure() {
                let userId = sessionStorage.getItem("userId");
                let iscp_port = sessionStorage.getItem("iscp_port") ? sessionStorage.getItem("iscp_port") : ''
                let timestamp = new Date().getTime() + ""
                let data = {
                    userId: userId,
                    menus:this.cardList,
                    timestamp: timestamp,
                }
                data = JSON.stringify(data);
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                let sign = sm3(data);
                $.ajax({
                    method: "POST",
                    url: localUrlLink + iscp_port + "/tjAiAssistant/aiSysRes/saveUserMenuSortOrder",
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign,
                        timestamp: timestamp,
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                if (Authentication) {
                                    sessionStorage.setItem("Authentication", Authentication);
                                    mui.toast('保存成功', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                    sessionStorage.setItem("menus", JSON.stringify(this.cardList))
                                    this.home()
                                } else {
                                    mui.toast('令牌校验失败', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: function (e) {
                        mui.toast("请稍后再试！", {
                            duration: 'long',
                            type: 'div'
                        })
                    },
                })
            },
            handleSwitchChange(type) {
                // 根据点击的开关类型，强制关闭另一个开关
                if (type === 'default') {
                    this.isCustomOn = false; // 关闭自定义排序开关
                    this.isDefaultOn = true
                } else {
                    this.isDefaultOn = false; // 关闭默认排序开关
                    this.isCustomOn = true;
                }

            },
            home() {
                $(location).attr("href", "Home.html");
            },
        },
    });
</script>

</html>